<template>
  <view class="hor-layout" style="padding: 20px">
    <!--  任务信息  -->
    <el-form label-width="100px" label-position="left" style="width: 50%">
      <el-form-item label="任务名称" required>
        <el-input type="textarea" v-model="taskObj.task_title" :disabled="taskDetail" clearable placeholder="请输入任务名称"
                  style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="任务楼号" required>
        <el-checkbox-group v-model="taskObj.build_nums" :disabled="taskDetail" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(item,index) in buildings" :key="index" :label="item.value">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="taskDetail"
                     @change="handleCheckAllChange">全选
        </el-checkbox>
      </el-form-item>
      <el-form-item label="任务描述">
        <el-input type="textarea" v-model="taskObj.task_desc" :disabled="taskDetail" clearable placeholder="请输入任务描述"
                  style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="任务类型" required>
        <el-select v-model="taskObj.task_type" :disabled="taskDetail" size="small" placeholder="请选择任务类型">
          <el-option v-for="item in taskTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-card style="margin-top: 10px;margin-right: 10px" :body-style="{padding:'10px 20px'}">
          <div slot="header">
            <span style="font-size: small;color: #999999">{{ getSelTaskLabel }}</span>
          </div>
          <!--    收费任务    -->
          <view v-if="taskObj.task_type===TaskType.charge" class="ver-layout">
            <view style="margin-bottom: 10px">
              <span style="color: #999999"> 收费类别数：</span>
              <el-input-number v-model="taskObj.task_charge_num" :disabled="taskDetail" :min="1" size="mini"
                               controls-position="right"
                               @change="changeChargeNum"></el-input-number>
            </view>
            <view v-for="(item,index) in taskObj.task_charge" class="charge-layout hor-layout-center-all">
              <el-tag>第{{ index + 1 }}类</el-tag>
              <span class="charge-info">金额：</span>
              <el-input-number v-model="item.amount" :disabled="taskDetail" size="mini" :min="1"></el-input-number>
              <span class="charge-info">描述：</span>
              <el-input v-model="item.desc" :disabled="taskDetail" size="mini" placeholder="请输入描述" clearable
                        class="charge-info-value"></el-input>
            </view>
          </view>
          <!--    信息采集任务      -->
          <view v-if="taskObj.task_type===TaskType.info" class="ver-layout">
            <view class="hor-layout">
              <view class="info-title">信息标题：</view>
              <el-input v-model="taskObj.task_info.info_title" :disabled="taskDetail" size="mini" placeholder="请输入信息标题"
                        style="flex: 1"></el-input>
            </view>
            <view class="hor-layout" style="margin-top: 10px">
              <view class="info-title">材料描述：</view>
              <el-input v-model="taskObj.task_info.image_desc" :disabled="taskDetail" size="mini" placeholder="请输入材料描述"
                        style="flex: 1"></el-input>
            </view>
          </view>
        </el-card>
      </el-form-item>
      <el-button type="primary" :loading="addLoading" v-if="!taskDetail" @click="addTaskClick">确定</el-button>
      <el-button type="success" v-else @click="naviBack">返回</el-button>
    </el-form>
    <!--  任务预览  -->
    <el-card style="width: 50%">
      <div slot="header" style="padding: 10px 0px;">
        <span>任务预览</span>
      </div>
      <view class="ver-layout client-container">
        <view class="client-title">{{ taskObj.task_title }}</view>
        <view style="font-size: small;color: gray">{{ taskObj.task_desc }}</view>
        <!--   收费任务     -->
        <template v-if="taskObj.task_type===TaskType.charge">
          <view class="charge-type">选择缴费类型：</view>
          <view class="flex-grid-layout">
            <view v-for="(item,index) in taskObj.task_charge" :key="index" class="ver-layout-center-all charge-card">
              <view>{{ item.amount }}<span style="font-size: small">元</span></view>
              <view class="charge-card-desc single-line">{{ item.desc }}</view>
            </view>
          </view>
        </template>
        <view v-if="taskObj.task_type===TaskType.info">
          <view class="ver-layout" style="margin-top: 30px">
            <view class="hor-layout-center" style="margin-bottom: 10px">
              <view style="width: 3px;height: 17px;background: #3a8ee6"></view>
              <view style="font-size: small;margin-left: 7px">{{ taskObj.task_info.info_title }}</view>
            </view>
            <el-input type="textarea" :placeholder="getPlaceHolder(taskObj.task_info.info_title)"></el-input>
          </view>
          <view class="ver-layout" style="margin-top: 20px">
            <view class="hor-layout-center" style="margin-bottom: 10px">
              <view style="width: 3px;height: 17px;background: #3a8ee6"></view>
              <view style="font-size: small;margin-left: 7px">{{ taskObj.task_info.image_desc }}</view>
            </view>
            <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                       :file-list="taskInfoFiles" list-type="picture-card"
                       :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </view>
        </view>
      </view>
    </el-card>
  </view>
</template>

<script>
import { data } from "@/common/house"

export default {
  name: "add",
  data() {
    return {
      taskId: '',
      updateTask: '',//修改任务
      taskObj: {
        task_title: '',
        build_nums: [],
        task_desc: '',
        task_type: 'charge',
        task_charge_num: 1,
        task_charge: [{amount: 10, desc: ''}],
        task_info: {info_title: '', image_desc: ''}
      },
      addLoading: false,
      buildings: data.buildings,
      checkAll: false,
      isIndeterminate: true,
      taskTypes: data.taskTypes,
      TaskType: data.TaskType,
      taskInfoFiles: []
    }
  },
  computed: {
    getSelTaskLabel() {
      return this.taskTypes.find(item => item.value === this.taskObj.task_type).label
    },
    taskDetail() {//如果有任务id但是没有update信息就是详情
      return this.taskId && !this.updateTask
    }
  },
  onLoad(option) {
    this.taskId = option.taskId
    this.updateTask = option.update
    if (this.taskId && this.updateTask) {
      this.getTaskInfo(), uni.setNavigationBarTitle({title: '修改任务'})
    } else if (this.taskId) {
      this.getTaskInfo(), uni.setNavigationBarTitle({title: '任务详情'})
    }
  },
  methods: {
    getTaskInfo() {
      this.$db.collection('plot-task').doc(this.taskId).get().then(res => {
        let result = res.result.data[0]
        this.taskObj = result
      }).catch(err => this.$message.error(err.message))
    },
    updateTaskInfo() {
      let {task_title, task_desc, build_nums, task_type, task_charge, task_charge_num, task_info} = this.taskObj
      let params = {task_title, task_desc, build_nums, task_type, task_charge, task_charge_num, task_info, state: "0"}
      this.addLoading = true
      this.$db.collection('plot-task').doc(this.taskId).update(params).then(res => {
        this.$message.success("修改成功！")
        this.$navBack()
      }).catch(err => this.$message.error(err.message))
          .finally(() => this.addLoading = false)
    },
    addTaskClick() {
      if (this.taskId) {
        this.updateTaskInfo()
        return
      }
      let {task_title, task_desc, build_nums, task_type, task_charge, task_charge_num, task_info} = this.taskObj
      build_nums.sort()
      let params = {task_title, task_desc, build_nums, task_type, task_charge, task_charge_num, task_info, state: "0"}
      this.addLoading = true
      this.$db.collection('plot-task').add(params).then(res => {
        this.$message.success("添加成功！")
        this.$navBack()
      }).catch(err => this.$message.error(err.message))
          .finally(() => this.addLoading = false)
    },
    naviBack() {
      this.$navBack()
    },
    getPlaceHolder(value, header = '请输入') {
      return header + value
    },
    changeChargeNum(value) {
      console.log(value)
      let charge = {amount: 10, desc: ''}
      if (this.taskObj.task_charge.length > value) {
        this.taskObj.task_charge.pop()
      } else {
        this.taskObj.task_charge.push(charge)
      }
    },
    handleCheckAllChange(val) {
      let builds = this.buildings.map(item => {
        return item.value
      })
      this.taskObj.build_nums = val ? builds : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.buildings.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.buildings.length;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file)
    },
  }
}
</script>

<style scoped>
.client-container {
  width: 250px;
  height: 400px;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #aaa;
}

.client-title {
  margin: 15px 10px;
  text-align: center;
  font-weight: bold;
}

/deep/ .el-card__header {
  padding: 5px 20px;
}

.charge-layout {
  padding-top: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eeeeee;
}

.charge-info {
  font-size: small;
  margin-left: 20px;
}

.charge-info-value {
  flex: 1;
}

.charge-type {
  font-size: small;
  margin-top: 30px;
}

.charge-card {
  width: 30%;
  height: 50px;
  margin: 10px 1%;
  color: rgba(58, 142, 230, 1);
  border-radius: 5px;
  background: rgba(58, 142, 230, 0.2);
}

.charge-card-desc {
  width: 80%;
  color: #999999;
  margin: 0px 10%;
  font-size: small;
  text-align: center;
}

.info-title {
  font-size: small;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 51px;
  height: 51px;
}

/deep/ .el-upload--picture-card {
  width: 50px;
  height: 50px;
  line-height: 55px;
}
</style>
